<template>
	<view class="my">
		<view class="top">
			<view class="uinfo">
				<image :src="userinfo.avatar?userinfo.avatar:imgSrc"></image>
				<view class="info">
					<view class="username">{{ userinfo.username?userinfo.username:'请登录' }}</view>
					<view class="welcome" v-if="userinfo.username">欢迎回来</view>
				</view>
			</view>
			<view class="userinfo" v-if="userinfo.username" @click="editInfo">
				<uni-icons type="compose" color="#fff" size="22"></uni-icons>
				<!-- <text class="iconfont icon-icon_edit" style="color: #fff;"></text> -->
				<text class="myinfo">修改我的个人资料</text>
			</view>
		</view>
		<view class="banner">
			<view class="tops">
				<i class="iconfont icon-fapiao"></i>
				<text class="title">我的预约</text>
			</view>
			<view class="ban" @click="goLogin">
				<BannerItem color="purple" type="email-filled" title="可使用" url="/subPackage/MyOrder/MyOrder?currentIndex=1"></BannerItem>
				<BannerItem color="cyan" type="calendar-filled" title="已核销" url="/subPackage/MyOrder/MyOrder?currentIndex=2"></BannerItem>
				<BannerItem color="orange" type="info-filled" title="已过期" url="/subPackage/MyOrder/MyOrder?currentIndex=3"></BannerItem>
				<BannerItem color="red" type="trash-filled" title="系统取消" url="/subPackage/MyOrder/MyOrder?currentIndex=4"></BannerItem>
				<BannerItem color="gold" type="star-filled" title="全部预约" url="/subPackage/MyOrder/MyOrder?currentIndex=0"></BannerItem>
			</view>
		</view>
		<!-- 条项 -->
		<view class="list">
			<navigator :url="item.url" class="list-item" v-for="item in itemList" :key="item.name">
				<i :class="['iconfont',item.icon]"></i>
				<text>{{ item.name }}</text>
			</navigator>
		</view>
		<button type="default" @click="logout">退出登录</button>
	</view>
</template>

<script>
	import { GetUserinfo, GetOrderList } from '../../api/index.js'
	export default {
		// props:['type'],
		data() {
			return {
				userinfo:{},
				orderList:[],
				itemList:[
					{icon:'icon-shoucang1',name:'我的收藏',url:'/subPackage/MyFavourite/MyFavourite',color:''},
					{icon:'icon-henji',name:'历史浏览',url:'/subPackage/LookLog/LookLog',color:''},
					{icon:'icon-chengyuan',name:'家政员入口',url:'/subPackageHH/login/login',color:'purple'},
					{icon:'icon-shezhi',name:'系统后台管理',url:'/subPackageAdmin/My/My',color:'red'}
				],
				imgSrc:'https://img.ixintu.com/download/jpg/20200901/3e9ce3813b7199ea9588eeb920f41208_512_512.jpg!ys'
			};
		},
		onLoad() {
			this.getUserinfo().then(()=>{
				this.getOrderList()
			})
			
			
			
		},
		methods:{
			async getUserinfo(){
				this.userinfo = JSON.parse(uni.getStorageSync('userinfo')||'')
				// const { data:res } = await GetUserinfo(userinfo.id)
				// console.log(res,'userinfo')
				// console.log(userinfo,'userinfo')
				// this.userinfo = res.data.user
			},
			async getOrderList(){
				
				const { data:res } = await GetOrderList(this.userinfo.id)
				console.log(res,'orderlist')
				this.orderList = res.data
			},
			editInfo(){
				uni.navigateTo({
					// url:'/subPackageAdmin/EditInfo/EditInfo?id='+this.userinfo.id+'&tp='+0
					url:`/subPackageAdmin/EditInfo/EditInfo?id=${this.userinfo.id}&tp=0`
				})
			},
			go(){
				uni.navigateTo({
					url:'/subPackage/MyOrder/MyOrder'
				})
			},
			logout(){
				uni.setStorageSync('userinfo','')
				this.userinfo = {}
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			goLogin(){
				console.log('fff')
				if(!this.userinfo.username){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.my{
	// padding: 20rpx;
	.top{
		background: #1afa29;
		padding-bottom: 0rpx;
		color: #fff;
		.uinfo{
			display: flex;
			padding: 20rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.info{
				line-height: 50rpx;
				
			}
		}
		.userinfo{
			width: 90%;
			display: flex;
			align-items:center;
			margin: 20rpx auto;
			padding: 20rpx;
			background: lawngreen;
			border-radius: 16rpx 16rpx 0 0;
			.icon-icon_edit{
				margin-right: 6rpx;		
				color: red;
			}
			.myinfo{
				margin-left: 8rpx;
			}
		}
	}
	.banner{
		margin: 30rpx auto;
		padding: 20rpx;
		.tops{
			display: flex;
			align-items: center;
			.iconfont{
				margin-right: 6rpx;
			}
			.title{
				font-weight: bold;
			}
		}
		.ban{
			display: flex;
			justify-content: space-evenly;
			margin: 20rpx;
			background: #fff;
			border: 1px solid #f1f1f1;
			padding: 20rpx;
			border-radius: 16rpx;
			.item{
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
	.list{
		padding: 20rpx;
		.list-item{
			display: flex;
			border-bottom: 1px solid #ccc;
			padding: 20rpx;
			.iconfont{
				font-size: 40rpx;
				margin-right: 15rpx;
			}
		}
	}
	button{
		width: 50%;
	}
}
</style>
